<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import { ref, computed } from 'vue';
import * as indexdata from '@/api/indexdata.js';
const dataModel = ref([]);

const searchQuery = ref(''); // 搜索内容
const currentPage = ref(1);  // 当前页
const pageSize = ref(10);      // 每页显示的评论数量
const total = ref(0);     



const getDate = async ()=>{
  const param = {
    content:searchQuery.value,
    currentPage:currentPage.value
  }
  console.log(param);
  const res = await indexdata.findPinlunService(param);
  if (res.code === 0) {
    dataModel.value = res.data
    total.value = res.total
  }
}

const resetFilters = () =>{
  searchQuery.value = '';
}

const search = () => {
  getDate();
};

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
  getDate();
};

getDate();

const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return d.toLocaleDateString(); // 根据需求你可以选择不同的格式化方式
};


const delData = async (row) => {
    ElMessageBox.confirm(
    '你确认要删除该评论信息吗?',
    '温馨提示',
    {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
    .then(async () => {
        try {
            // 调用接口
            const result = await indexdata.delpinlun({ id: row.id });
            if (result) {  // 假设 result 为删除成功的标志
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                getDate()
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败',
                });
                getDate()
            }
        } catch (error) {
            console.error('删除操作失败:', error);
            ElMessage({
                type: 'error',
                message: '删除失败，请稍后再试。',
            });
        }
    })
    .catch(() => {
        console.log('取消删除');
        ElMessage({
            type: 'info',
            message: '取消删除',
        });
    });
    getDate();
}


</script>

<template>
  <el-card class="review-card">
    <h2 class="review-title">我的评论</h2>
    <el-divider></el-divider>
    <!-- 搜索框 -->
    <el-row class="filter-row" :gutter="20">
      <el-col :span="6">
        <el-input
          v-model="searchQuery"
          placeholder="搜索评论内容"
          prefix-icon="el-icon-search"
          @input="filterReviews"
          style="width: 100%; margin-bottom: 20px;"
        ></el-input>
      </el-col>

      <el-col :span="6">
        <el-button @click="search" type="primary" class="search-btn">检索</el-button>
      </el-col>

      <el-col :span="6">
        <el-button @click="resetFilters" type="default" class="reset-btn">重置</el-button>
      </el-col>
    </el-row>
    <br>
    

    <!-- 评论表格 -->
    <el-table :data="dataModel" style="width: 100%">
      <el-table-column label="评论内容" prop="content"></el-table-column>
      <el-table-column label="评分" prop="fenshu">
        <template #default="{ row }">
          <el-rate v-model="row.fenshu" disabled></el-rate>
        </template>
      </el-table-column>
      <el-table-column label="评论时间" prop="createTime">
        <template #default="{row}">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="评论对象" prop="dataName"></el-table-column>
      <el-table-column label="操作" width="100">
          <template #default="{ row }">
              <el-button :icon="Delete" circle plain type="danger" @click = "delData(row)"></el-button>
          </template>
      </el-table-column>
      <template #empty>
          <el-empty description="没有数据" />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      layout="total, prev, pager, next"
      style="margin-top: 20px; display: flex; justify-content: flex-end;"
    ></el-pagination>
  </el-card>
</template>



<style scoped>
.review-card {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  width: 100%; /* 增加宽度 */
  max-width: 1200px;
  margin: 0 auto;
}

.review-title {
  font-size: 24px;
  font-weight: bold;
  margin-top:-20px;
  margin-bottom: 20px;
}

.el-input {
  margin-bottom: 20px;
}

.el-table {
  margin-bottom: 20px;
  width: 100%;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
